@use './theme' as theme;
@use 'sass:meta';
@use 'sass:map';

.luna-setting {
  .luna-setting-item {
    &:hover,
    &.luna-setting-selected {
      background: none;
    }
    &.luna-setting-selected:focus {
      outline: none;
    }
  }
}

.custom-titlebar {
  .luna-modal {
    top: 31px;
  }
}

.luna-modal {
  z-index: theme.$z-index-popup-base;
}

.luna-modal-input {
  user-select: text !important;
}

.luna-notification {
  padding-top: 40px;
  z-index: theme.$z-index-popup-base + 5;
}

.luna-notification-item {
  border-radius: 4px;
  padding: 5px 10px;
}

.luna-image-viewer {
  border: none;
}

.luna-logcat {
  border: none;
}

$colors: 'blue', 'purple', 'cyan', 'green', 'magenta', 'pink', 'red', 'orange',
  'yellow', 'volcano', 'geekblue', 'gold', 'lime';

$theme-variables: meta.module-variables(theme);
@each $color in $colors {
  @for $i from 6 through 10 {
    .luna-logcat-color-#{$color}-#{$i} {
      $variable-name: #{$color}-#{$i};
      color: map.get($theme-variables, $variable-name);
    }
  }
}

.-theme-with-dark-background {
  @each $color in $colors {
    @for $i from 6 through 10 {
      .luna-logcat-color-#{$color}-#{$i} {
        $variable-name: #{$color}-#{$i}-dark;
        color: map.get($theme-variables, $variable-name);
      }
    }
  }
}

@each $class in (':root', '.-theme-with-dark-background') {
  #{$class} {
    .luna-data-grid-data-container {
      .luna-data-grid-node.luna-data-grid-selected,
      .luna-data-grid-node.luna-data-grid-selectable:hover {
        background-color: if($class == ':root', #ddd, #393939);
      }
      tr:nth-child(even) {
        background-color: if($class == ':root', #ededed, #1e1e1e);
      }
    }
    .luna-data-grid:focus {
      .luna-data-grid-node.luna-data-grid-selectable.luna-data-grid-selected {
        background-color: var(--color-primary);
      }
    }
  }
}

.luna-performance-monitor {
  border: none;
  background-color: var(--color-bg-container) !important;
}

.luna-performance-monitor-title {
  display: inline-block;
  height: 16px;
  font-size: #{theme.$font-size}px;
  line-height: 16px;
}

.custom-titlebar {
  .luna-command-palette {
    top: 31px;
  }
}

.luna-command-palette {
  z-index: theme.$z-index-popup-base;
}

.luna-command-palette-body {
  padding: #{theme.$padding-x-x-s}px;
  border: 1px solid var(--color-border);
  border-radius: #{theme.$border-radius-x-s}px;
}

.luna-command-palette-input {
  border-radius: #{theme.$border-radius-x-s}px;
  padding: #{theme.$padding-x-x-s}px;
  margin-bottom: #{theme.$margin-x-x-s}px;
}

.luna-command-palette-list {
  li {
    border-radius: #{theme.$border-radius-x-s}px;
  }
}
